<template>
	<div class="column w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<div class="label_top">
			<p><i class="line"></i>栏目管理</p>
		</div>
		<div class="wrapIn">
			<div class="el-tabs-report"> 
				<a class="listOne" @click="goaddcolumn" v-if="column.lmgl_add">添加栏目</a>
            </div>
			<ul class="tableTitle">
				<li style="width: 68px;">排序</li>
				<li style="width: 119px;">栏目名称</li>
				<li style="width: 340px;">子栏目</li>
				<li style="width: 178px;" class="index">操作</li>
			</ul>
			<ul v-for="(item,index) in tableData" style="width: 710px;" class="tableContent" :data="tableData">
				<li style="width: 68px;" class="indexleft">{{item.columnIndex}}</li>
				<li style="width: 119px;color:#44cef6">{{item.columnName}}<img src="../../assets/qudaoImg/switch_add.png" @click="addColumnChildren(item,index)"/></li>
				<li style="width: 340px;">{{item.childrenColumn}}</li>
				<li style="width: 178px;">
					<a @click="handleEdit(item)" class="edit" v-if="column.lmgl_edit">编辑</a>
					<div class="switch clearfix" @click="updateswitch(item)" >
				    	<el-switch class="switchStyle" v-model="item.visibleState" active-color="#44cef6" inactive-color="#999" :active-value="1" :inactive-value="0" :active-text="activeText" :inactive-text="inActiveText" v-if="column.lmgl_switch"></el-switch>
					</div>
					<a @click="handleDelete(index,tableData)" class="delete" v-if="column.lmgl_del">删除</a>
				</li>
				<li v-for="(itemchild,indexchild) in item.childList" v-bind:style="{height: item.childList!=null ? activeHeight : inactiveHeight,border: item.childList!=null ? activeBorder : inactiveBorder}" class="indexleft content" style="width: 100%;box-sizing: border-box;">
					<div >
						<div style="width: 68px;" class="indexleft contentC">111</div>
						<div style="width: 119px;" class="contentC">111</div>
						<div class="contentC" style="width: 340px;color:#333">
							<span class="span01">{{ itemchild.columnName }}</span>
							<span class="span02" @click="upmove(indexchild,item.childList)" v-if="column.lmgl_updown">上移</span>
							<span class="span03" @click="downmove(indexchild,item.childList)" v-if="column.lmgl_updown">下移</span>
						</div>
						<div style="width: 178px;border-right: none;" class="contentC">
							<a @click="editColumnChildren(item,indexchild,index)" class="edit" v-if="column.lmgl_edit">编辑</a>
							<div class="switch clearfix" @click="updateswitch(itemchild)" >
								<el-switch class="switchStyle" v-model="itemchild.visibleState" active-color="#44cef6" inactive-color="#999" :active-value="1" :inactive-value="0" :active-text="activeText" :inactive-text="inActiveText" v-if="column.lmgl_switch"></el-switch>
							</div>
							<a @click="handleDelete(indexchild, item.childList)" class="delete" v-if="column.lmgl_del">删除</a>
						</div>
					</div>
				</li>
			</ul>
			<div class="pag_block">
				<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total" ></el-pagination>
			</div>
			<div class="columnWrap" v-show="wrapShow">
				<el-form :model="ruleForm" status-icon ref="ruleForm" label-width="118px" label="right">
					<el-form-item label="一级栏目名称：">
						<el-input v-model="ruleForm.columnFirst" :readonly="true" placeholder="" style="border:none;"></el-input>
					</el-form-item>
					<el-form-item label="子栏目名称：" prop="tel">
						<el-input v-model="ruleForm.columnChildren" placeholder="请输入子栏目名称"></el-input>
					</el-form-item>
					<el-form-item label="栏目属性：">
						<el-select v-model="ruleForm.columnType" placeholder="请选择栏目属性">
							<el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="状态：" prop="" width="144">
						<el-switch v-model="ruleForm.status" active-color="#44cef6" inactive-color="#999"  :active-value="1" :inactive-value="0"></el-switch>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="addSubmitSave()">保存</el-button>
						<el-button type="primary" @click="cancel()">取消</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	import deleteAlert from '../../components/deleteAlert.vue';
	export default {
		data() {
			return {
				column:'',
				activeText: '开启',
				inActiveText: '关闭',
				activeHeight: '42px',
				inactiveHeight: '0px',
				activeBorder: 'border-bottom: 1px solid #ccc',
				inactiveBorder: 'none',
				status: 0,
				activeState:false,
				wrapShow:false,
				tableData: [],
				ruleForm: {
					rootcompanyidSelect:'',
					columnFirst:'',
					columnChildren: '',
					columnType:'',
					status:0,
					id:''
				},
				option: [{
					value: 1,
					label: '课程'
				},{
					value: 2,
					label: '资讯'
				},{
					value: 5,
					label: '直播'
				},{
					value: 6,
					label: '知识地图'
				}],
		        pagesize: 15,
		        currentpage: 1,
		        total: 1,
				sort:1,
				index:1,
				childrenIndex:0,
				childrenSaveType:'add'
			}
		},
		methods: {
			getTableList(){
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/kcColumn/selectKcColumn",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: {
						rootcompanyid:1,
					    page: this.currentpage,
						num: this.pagesize
					},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
						}
					}
				});
			},
			goaddcolumn(){
				this.$router.push({
          			path: '/addcolumn'
        		})
			},
			addColumnChildren(e,index){
				this.index = index;
				this.childrenSaveType='add';
				this.wrapShow = true;
				this.ruleForm.columnFirst = e.columnName;
				this.columnParentId=e.id;
				this.ruleForm.columnChildren='';
				this.ruleForm.status=0;
			},
			editColumnChildren(e,childrenIndex,index){
				this.index = index;
				this.childrenIndex=childrenIndex;
				this.childrenSaveType='edit';
				this.wrapShow = true;
				this.ruleForm.columnFirst = e.columnName;
				this.ruleForm.rootcompanyidSelect = e.rootcompanyid;
				this.ruleForm.columnChildren=e.childList[childrenIndex].columnName;
				this.ruleForm.columnType=e.childList[childrenIndex].columnType;
				this.ruleForm.status=e.childList[childrenIndex].visibleState;
				this.ruleForm.id=e.childList[childrenIndex].id;
				this.columnParentId=e.id;
			},
			cancel(){
				this.wrapShow = false;
				this.ruleForm.columnType='';
			},
			addSubmitSave(){
				if(this.childrenSaveType=='add'){
					this.$ajax({
						url: this.$root.jifuUrl +'/mns/kcColumn/addKcColumn',
						headers:{'ContentType': 'application/json; charset=utf-8'},
						data: {
							columnLevel:"2",
							rootcompanyid:1,
							columnParentId: this.columnParentId,
							columnName:this.ruleForm.columnChildren,
							columnType:this.ruleForm.columnType,
							visibleState:this.ruleForm.status
						},
						method: 'POST',
						success: res => {
							if(res.data.code == 200) {
								this.$rootFunction().addResSuccess();
							}else{
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}else if(this.childrenSaveType=='edit'){
					let s2 = {
						id:this.ruleForm.id,
						columnLevel:"2",
						rootcompanyid:1,
						columnParentId: this.columnParentId,
						columnName:this.ruleForm.columnChildren,
						columnType:this.ruleForm.columnType,
						visibleState:this.ruleForm.status
					};
					this.tableData[this.index].childList[this.childrenIndex]=s2;

					this.$ajax({
						url: this.$root.jifuUrl +'/mns/kcColumn/updateKcColumn',
						headers:{'ContentType': 'application/json; charset=utf-8'},
						data: s2,
						method: 'PUT',
						success: res => {
							if(res.data.code == 200) {
								this.$rootFunction().addResSuccess();
							}else{
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}
				this.wrapShow = false;
			},
			updateswitch(item){
				let s={
					id:item.id,
					visibleState:item.visibleState,
					rootcompanyid:1
				};
				this.$ajax({
					url: this.$root.jifuUrl +'/mns/kcColumn/updateKcColumnVisibleState',
					headers:{'ContentType': 'application/json; charset=utf-8'},
					data: s,
					method: 'PUT',
					success: res => {
						if(res.data.code == 200) {
							console.log('状态改变成功')
						} else {
							console.log('状态改变失败')

						}
					}
				});
			},
			//上移
			upmove(index,item){
				if(index==0){
					this.$refs.alert.show({alertText: '已在顶部',alertSubmit:function(){alertStatus: 0}});
				}else{
					let s={
						id: item[index].id,
						operateType:'previous',
						rootcompanyid:1
					};
					this.swapItems(item,index,index-1)
					this.upOrDown(s)
				}
			},
			//下移
			downmove(index,item){
				if(index==item.length -1){
					this.$refs.alert.show({alertText: '已在底部',alertSubmit:function(){alertStatus: 0}});
				}else{
					let s={
						id: item[index].id,
						operateType:'next',
						rootcompanyid:1
					} 
					this.swapItems(item,index,index+1)
					this.upOrDown(s)
				}
			},
			// 交换数组元素
			swapItems (arr, index1, index2) {
				arr[index1] = arr.splice(index2, 1, arr[index1])[0];
				return arr;
			},
			//调用上下移动的接口
			upOrDown(s){
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/kcColumn/movelOrderColumn",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'PUT',
					data: s,
					success: res => {
						if(res.data.code == 200) {
							console.log(operateType +"成功")
						}
					}
				});
			},
			handleDelete(index,item){
				this.delIndex = index;
				this.delItem = item;
				this.deleteStatus = !this.deleteStatus
			},
			deleteSubmit(){
				let s={
					id:this.delItem[this.delIndex].id,
					state:0
				};
				this.$ajax({
				 	url: this.$root.jifuUrl + "/mns/kcColumn/deleteKcColumnState",
				 	headers:{'ContentType': 'application/json; charset=utf-8'},
				 	method: 'DELETE',
				 	data: s,
				 	success: res => {
				 		if(res.data.code == 200) {
							this.$rootFunction().deleteResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
				 	}
				});
			},
		    handleCurrentChange(val) {
		    	this.currentpage = val;
		        this.getTableList();
		    },
		    handleEdit(e) {
		    	this.$ajax({
					url: this.$root.jifuUrl +'/mns/kcColumn/selectKcColumnById',
					headers:{'ContentType': 'application/json; charset=utf-8'},
					data: {id:e.id},
					method: 'POST',
					success: res => {
						if(res.data.code == 200) {
							this.$router.push({
								name: 'addcolumn',
								params: {
									type: 'edit'
								}
							})
							this.$root.columnMsg = res.data.data;
						}
					}
				});
			},
			handleAvatarSuccess(res, file) {
				if(res.code == 200) {
					this.ruleForm.columnUrl = res.data[0];
				};
			},
			beforeAvatarUpload(file) {
				const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png');
				const isLt2M = file.size / 1024 / 1024 < 2;
				if(!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			}
		},
		components: {
			alert,
			deleteAlert
		},
		mounted: function() {
			this.getTableList();
			this.column = this.$root.huasan.column;
		}
	};
</script>

<style>
	.column{padding-bottom:100px}
	.column .wrapIn{width:710px;height:auto;}
	.column .wrapIn .tableTitle {height:34px;line-height:34px;border:1px solid #ccc;width: 708px;}
	.column .wrapIn .tableTitle li{font-size: 15px;}
	.column .wrapIn ul{overflow: hidden;}
	.column .wrapIn li {display:block;float:left;text-align:center;color:#333;font-size:14px;border-right:1px solid #ccc;font-weight:bold;}
	.column .wrapIn .tableTitle li.index {border-right:none;}
	.column .tableContent {height:auto;}
	.column .tableContent li {height:42px;line-height:42px;border-bottom:1px solid #ccc;font-weight:normal;}
	.column .tableContent li.indexleft {border-left:1px solid #ccc;}
	.column .tableContent li .edit {font-size:14px;color:#0083E2;cursor: pointer;}
	.column .tableContent li .delete {font-size:14px;color:#FF2D51;cursor: pointer;}
	.column .tableContent li.content .contentC {display:inline-block;border-right:1px solid #ccc;float:left;color:#fff;height:42px;line-height:42px;}
	.column .tableContent li img{margin-left: 10px;position: relative;top: 2px;cursor: pointer;}
	.column .switch {display:inline-block;border-radius:15px;box-sizing:border-box;overflow:hidden;position:relative;top:3px;margin:0 10px;}
	.column .switch div {float:left;cursor: pointer;}
	.column .switch-text {height:17px;line-height:17px;color:#ffffff;font-size:12px;padding:0 3px 0 3px;}
	.column .switch-icon {width:14px;height:14px;border-radius:13px;background-color:#ffffff;border-radius:1px solid #dcdcdc;margin:1px;}
	.column .columnWrap {width:468px;height:350px;position: fixed;top: 50%;left: 50%;margin-top: -175px;margin-left: -234px;z-index: 999;}
	.column .columnWrap .el-form{width:446px;height:300px;border:1px solid #ccc;padding:30px 0 0 20px;background: #fff;}
	.column .wrapIn .pag_block{margin-top: 25px;}
	.column .el-form-item__label{height: 36px;line-height: 36px;}
	.column .el-input .el-input__inner{padding: 0 0 0 10px!important;}
	.column .el-form-item__content{width: 100%;}
	.column .column .el-input,.column .el-input input{width: 183px;height: 36px;line-height: 36px;}
	.column .el-form-item{margin-bottom: 10px;}
	.columnWrap .el-button {background:#44CEF6;height:33px;line-height:33px;width:100px;display:inline-block;padding:0!important;border:0;color:#fff;}
	.columnWrap .el-button:hover {background:#31c7f2;}
	.columnWrap .el-button:nth-child(2) {background:#ccc;margin-left:50px;}
	.column .indexleft.content .contentC .span01{width: 150px;display:inline-block;text-align: center}
	.column .indexleft.content .contentC .span02{width: 40px;display:inline-block;text-align: center;cursor: pointer;margin-left: 75px}
	.column .indexleft.content .contentC .span03{width: 40px;display:inline-block;text-align: center;cursor: pointer;}
	.column .switchStyle span.el-switch__label--right{top: 0;left: -17px}
	.column .switchStyle span.el-switch__label--left{top: 0;left: 8px}
	.column .beforeDelete{width: 467px;height: 250px;position: fixed;top: 50%;left: 50%;margin-top: -125px;margin-left: -233px;z-index: 999;background: #fff;border: 1px solid #ccc;}
	.column .beforeDelete p{text-align: center;font-size: 16px;color:#333;margin-top: 63px;}
	.column .beforeDelete .delBtn{width: 287px;margin: 0 auto;margin-top: 63px;}
	.column .beforeDelete .delBtn a{background: #44CEF6;height: 33px;line-height: 33px;width: 100px;display: inline-block;color:#fff;text-align: center;border-radius: 5px;cursor: pointer;font-size: 14px;}
	.column .beforeDelete .delBtn a:nth-child(2){background: #ccc;}
	.columnWrap .avatar-uploader .el-upload {border-radius:6px;cursor:pointer;position:relative;overflow:hidden;width:125px;height:70px;}
	.columnWrap .avatar-uploader .el-upload:hover {border-color:#409EFF;}
	.columnWrap .avatar-uploader-icon {font-size:28px;color:#8c939d;width:125px;height:60px;text-align:center;background:#f2f2f2;padding-top:10px;}
	.columnWrap .avatar-uploader-icon b{font-size:14px;}
	.columnWrap .avatar-uploader-icon em{font-style: normal;}
	.columnWrap .avatar {width:125px;height:70px;display:block;}
	.column .pag_block li{font-size: 12px;color: #ccc;}
	.column .pag_block li.active{color: #44CEF6;border-right: 1px solid #44CEF6;}
</style>